<template>
	<div class="container">
		<a-row :gutter="20" justify="end">
			<a-col :span="2" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/contractzz')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<a-descriptions title="周转料租赁合同详情" bordered :column="3" :label-style="{ width: '140px' }" :content-style="{ width: 'calc(33.333333333vw - 140px)' }">
			<a-descriptions-item label="项目名称">{{ formState.project?.name }}</a-descriptions-item>
			<a-descriptions-item label="选择计划名称">{{ formState.plan?.name }}</a-descriptions-item>
			<a-descriptions-item label="合同名称">{{ formState.name }}</a-descriptions-item>
			<a-descriptions-item label="合同编号">{{ formState.code }}</a-descriptions-item>
			<a-descriptions-item label="供应商">{{ formState.supplier?.company_name }}</a-descriptions-item>
			<a-descriptions-item label="客户联系人">{{ formState.contact }}</a-descriptions-item>
			<a-descriptions-item label="签订时间">{{ formState.sign_time }}</a-descriptions-item>
			<a-descriptions-item label="附件">
				<template v-for="(item, i) in formState.file_path" :key="i">
					<a :href="item.url" target="_blank" class="mr-8">
						<a-space>
							<file-pdf-outlined />
							{{ item.name }}
						</a-space>
					</a>
				</template>
			</a-descriptions-item>
		</a-descriptions>
		<a-table :scroll="tableScroll" :pagination="false" :data-source="formState._materials" :columns="columns" :row-key="(record) => record.key" :title="() => '合同物资清单'">
			<template #summary>
				<a-table-summary-row class="table-summary">
					<a-table-summary-cell>
						<a-typography-text>合计</a-typography-text>
					</a-table-summary-cell>

					<a-table-summary-cell :col-span="6"></a-table-summary-cell>

					<a-table-summary-cell>
						<a-typography-text>
							&yen;
							<b>{{ formState.amount }}</b>
						</a-typography-text>
					</a-table-summary-cell>
					<a-table-summary-cell :col-span="2"></a-table-summary-cell>
					<a-table-summary-cell>
						<a-typography-text>
							&yen;
							<b>{{ formState.with_tax_amount }}</b>
						</a-typography-text>
					</a-table-summary-cell>

					<a-table-summary-cell>
						<a-typography-text>
							&yen;
							<b>{{ formState.tax_amount }}</b>
						</a-typography-text>
					</a-table-summary-cell>

					<a-table-summary-cell></a-table-summary-cell>
				</a-table-summary-row>
			</template>
		</a-table>
		<h2 style="margin: 12px;">合同的发起申请人</h2>
		<a-workflow v-if="formState.id" v-model:status="formState.workflow_status" module="contractzz" :target-id="formState.id" :project-id="formState.project_id" :code="formState.code" :user-id="formState.opr_id" :extra="true" :steps="true" @submit="(e) => console.log(e)"></a-workflow>
		<a-row :gutter="20" justify="end">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/contractzz')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";

import { post, listToTree } from "../utils";
import { useRoute } from "vue-router";
import { AWorkflow } from "@/components/index.js";
import { FilePdfOutlined } from "@ant-design/icons-vue";
import * as math from "mathjs";
const route = useRoute();
const id = computed(() => {
	return route.params.id || 0;
});
const formState = ref({ materials: [] });
const formRef = ref();
const { proxy } = getCurrentInstance();
const tableScroll = computed(() => ({ x: document.documentElement.clientWidth - 680 }));

const columns = [
	{
		title: "ID",
		dataIndex: "key",
		width: 60,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return index + 1;
		}
	},
	{
		title: "周转料名称",
		dataIndex: ["material", "name"],
		width: 130,
		ellipsis: true
	},
	{
		title: "型号规格",
		dataIndex: ["material", "model"],
		width: 130,
		ellipsis: true
	},
	{
		title: "计量单位",
		dataIndex: "unit",
		width: 130,
		align: "center"
	},
	{
		title: "需用数量",
		dataIndex: "quantity",
		width: 100,
		align: "center"
	},
	{
		title: "计划租赁时长",
		dataIndex: "use_time",
		width: 100,
		align: "center"
	},
	{
		title: "不含税单价(元)",
		dataIndex: "without_tax_subprice",
		width: 130,
		align: "center"
	},
	{
		title: "不含税总价(元)",
		dataIndex: "without_tax_amount",
		width: 130,
		align: "center"
	},
	{
		title: "税率%",
		dataIndex: "tax",
		width: 120,
		align: "center"
	},
	{
		title: "含税单价(元)",
		dataIndex: "with_tax_subprice",
		width: 120,
		align: "center"
	},
	{
		title: "含税总价(元)",
		dataIndex: "with_tax_amount",
		width: 120,
		align: "center"
	},
	{
		title: "税额",
		dataIndex: "tax_amount",
		width: 120,
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		width: 200,
		align: "center"
	}
];

onMounted(async () => {

	if (id.value) {
		await post("contract/info", { id: id.value }).then(data => {
			if (data.file_path) data.file_path = JSON.parse(data.file_path);
			data.with_tax_amount = math.format(math.add(data.amount, data.tax_amount), value => value.toFixed(2));
			formState.value = data;
		});
	}
});
const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
  background: #fff;
  padding: 12px;
}

:deep(.ant-table-title) {
  font-size: 16px;
  padding: 20px 0;
  text-align: center;
}

.table-summary {
  background: #fcfcfc;
  color: #333;
  font-size: 12px;
  text-align: center;
}

.workflow {
  margin-top: 32px;
}
</style>
